<script setup>
import { View } from "@element-plus/icons-vue";
import { ref } from "vue";
import { formatTime } from "@/utils/format";
import { openFilePreview } from "@/utils/kkFileView";
import { auditFarmerApply } from "@/api/farmerApplication";

// 抽屉显隐
const visibleDrawer = ref(false);
// 存储申请数据
const applicationDetail = ref({});

const emit = defineEmits(["success"]);
const handleOpen = async (row) => {
  visibleDrawer.value = true;
  applicationDetail.value = { ...row }; // 复制行数据
};

defineExpose({
  handleOpen,
});

const statusMap = [
  { label: "待审核", value: 0 },
  { label: "通过", value: 1 },
  { label: "驳回", value: 2 },
];

// 请求参数
const data = ref({
  applicationId: "",
  status: 0,
  auditRemark: "",
});

// 取消
const handleCancel = () => {
  visibleDrawer.value = false;
  applicationDetail.value = {};
  data.value = { applicationId: "", status: 0, auditRemark: "" };
};

// 确定
const handleConfirm = async () => {
  data.value.applicationId = applicationDetail.value.applicationId;
  data.value.status = applicationDetail.value.status;
  data.value.auditRemark = applicationDetail.value.auditRemark;
  console.log(data.value);

  const res = await auditFarmerApply(data.value);
  emit("success");
  ElMessage({
    message: "成功",
    type: "success",
    plain: true,
  });
  // 关闭抽屉
  handleCancel();
};
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    title="农户申请详情"
    direction="rtl"
    size="50%"
  >
    <el-card style="max-width: 100%">
      <el-form
        :model="applicationDetail"
        label-width="100px"
        style="margin-top: 20px"
        @close="handleCancel"
      >
        <el-form-item label="农户id">
          <el-input v-model="applicationDetail.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="农户姓名">
          <el-input v-model="applicationDetail.realName" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证件号">
          <el-input v-model="applicationDetail.idCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请证明">
          <a>
            <el-button
              type="primary"
              @click="openFilePreview(applicationDetail.farmerProof)"
              :icon="View"
              >查看</el-button
            >
          </a>
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input
            v-model="applicationDetail.applicationContent"
            disabled
            :autosize="{ minRows: 2, maxRows: 6 }"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-input
            :value="formatTime(applicationDetail.applicationTime)"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="applicationDetail.status" style="width: 150px">
            <template #prefix>
              <el-tag v-if="applicationDetail.status === 0" type="info">
                待审核
              </el-tag>
              <el-tag v-if="applicationDetail.status === 1" type="success"
                >通过
              </el-tag>
              <el-tag v-if="applicationDetail.status === 2" type="danger">
                驳回
              </el-tag>
            </template>
            <el-option
              v-for="item in statusMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            v-model="applicationDetail.auditRemark"
            :autosize="{ minRows: 2, maxRows: 6 }"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>
